<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="pursue.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <title>表白墙</title>
  </head>
  <body>
    <div class="container">
      <div class="container-left">
        <div class="card">
            <form action="#">
                <h1>表白</h1>
                <div class="row">
                    谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c1">
                </div>    
                <div class="row">
                    想对谁：<input type="text" id="c2">
                </div>            
                <div class="row">
                    说：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c3">
                </div>
                <div class="print">
                    <div class="s">
                        <input type="button" value="发送" id="go" onclick="send()">
                    </div>
                </div>
            </form>
        </div>
      </div>
      <div class="container-right">
        <div class="article" id="a">
            <h1 style="font-size: 50px;">墙</h1>
        </div>
      </div>   
    </div>
    <script> 
        function send() {
            var text1 = jQuery("#c1");
            var text2 = jQuery("#c2");
            var text3 = jQuery("#c3");
            if(text1.val().trim() == "") {
                alert("请输入是谁！");
                text1.focus();
                return;
            }
            if(text2.val().trim() == "") {
                alert("请输入想对谁说！");
                text2.focus();
                return;
            }
            if(text3.val().trim() == "") {
                alert("请输入想说什么！");
                text3.focus();
                return;
            }
            var loveWords =  "<br><h2>" + text1.val() + " 想对 " + text2.val() + " 说 “" + text3.val() + "”！</h2>";
            jQuery("#a").append(loveWords);
            text1.val("");
            text2.val("");
            text3.val("");
        }
    </script>
  </body>
</html>
